<!--?xml version="1.0" encoding="UTF-8"?-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=GB2312">
<title> A css mouseover </title> 
<style type="text/css"> 

body {margin: 10px; padding: 5px; color:#000; background-color:#fff; font-family: "verdana", "sans-serif"; font-size:11px;}
#menu {width:630px; height:500px; background:url(open_one.gif); background-color:#fff; color:#000; text-align:center; position:absolute; top:50%; left:50%; margin-left:-315px; margin-top:-250px;}
#tabs {position:absolute; top:30px; right:0px; width:30px; height:440px; text-align:center;}
#menu a span {display:none;}
#menu a:visited {display:block; height:110px; background:url(tab_off.gif); width:30px; text-decoration:none; color:#888;}
#menu a {display:block; width:30px; height:110px; background:url(tab_off.gif); text-decoration:none; color:#888;}
#menu a:hover {text-decoration:none; background:url(tab_on.gif); background-color:#fff; color:#000;}
#menu a:active {text-decoration:none; color:#000;}
#menu a:hover .left {display:block; background:url(page_left.gif); background-color:#fff; position:absolute; color:#f00; top:-10px; left:-570px; width:275px; height:480px; font-weight:normal; text-align:left;}
#menu a:hover .right {display:block; background-color:#fff; position:absolute; color:#000; top:0px; left:-250px; width:250px; height:445px; font-weight:normal; text-align:left; z-index:10;}
span img {margin:10px; border:0px;}
h1 {font-size:20px;}
acronym {border-bottom:2px dashed #f00; cursor:help;}
.pad {margin-left:15px; margin-right:18px;}
.copy {position:absolute; bottom:30px; right:0px; font-size:9px; color:#000;}
#front {font-size:11px; display:block; background-color:#fff; position:absolute; color:#600; top:20px; margin-left:-240px; width:210px; height:400px; font-weight:normal; text-align:left;}
#start a#tp {width:630px; height:500px; background:url(closed.gif) no-repeat; background-position: top right; background-color:#fff; color:#000; text-align:left; position:absolute; top:50%; left:50%; margin-left:-315px; margin-top:-250px; z-index:20; text-decoration:none;}

a#tp:focus {display:none;}
a#tp:active {display:none;}
#start .pic {position:relative; margin-top:-200px; float:right; width:270px; text-align:center; color:#fff; font-size:30px;}

.bold {font-weight:bold; font-size:12px;}
#offscreen {position:absolute; top:-100px; left:0px; width:100px; height:1px;}
.h1 {font-size:18px; font-weight:bold;}

</style>
</head>

<body>
<div>
<span id="offscreen">
<img src="%E4%B9%A6%E6%9C%AC_files/open_one.gif" alt="" width="1" height="1"><img src="%E4%B9%A6%E6%9C%AC_files/tab_off.gif" alt="" width="1" height="1"><img src="%E4%B9%A6%E6%9C%AC_files/tab_on.gif" alt="" width="1" height="1"><img src="%E4%B9%A6%E6%9C%AC_files/page_left.gif" alt="" width="1" height="1"><img src="%E4%B9%A6%E6%9C%AC_files/closed.gif" alt="" width="1" height="1">
<img src="%E4%B9%A6%E6%9C%AC_files/boy.gif" alt="" width="1" height="1"><img src="%E4%B9%A6%E6%9C%AC_files/slave.gif" alt="" width="1" height="1"><img src="%E4%B9%A6%E6%9C%AC_files/dans.gif" alt="" width="1" height="1"><img src="%E4%B9%A6%E6%9C%AC_files/freddie2.png" alt="" width="1" height="1"><img src="%E4%B9%A6%E6%9C%AC_files/stu.gif" alt="" width="1" height="1"><img src="%E4%B9%A6%E6%9C%AC_files/name.gif" alt="" width="1" height="1"><img src="%E4%B9%A6%E6%9C%AC_files/stu.gif" alt="" width="1" height="1">
</span>

<span id="menu">

<span id="tabs">

<a href="#">
<br>p<br>&#8226;<br>1
<span class="left"><object><p class="pad"><br><img src="%E4%B9%A6%E6%9C%AC_files/boy.gif" alt="Based on an avatar" title="Based on an avatar">This is all produced using CSS. No javascript was used in the making of this diary.<br><br>The page will remain on the screen until you move your mouse out of the bordered area.<br><br>You
 can put as much text as you like in this area and even change the 
colour and weight etc. and put a copyright in the bottom right hand 
corner!</p></object></span>
<span class="right"><br><br>
<span class="bold">This is page one.</span><br><br>
<object><p class="pad">Not very exciting except that it uses a new way to display your pages.<br><br>
If this diary information was displayed in the normal way I would need 
to use four, maybe five, separate html pages, or put it all on one page 
and have you scroll up and down to read it.<br><br>
This idea is still in it's infancy and given time and a bit of messing around, it could certainly be improved.<br>
<br>
I hope that you enjoy the experience and maybe use some of the code in 
your own pages. If anything here is of interest then just grab it.<br><br>
A link back would be nice (but not compulsory).</p></object>
<object><div class="copy">&#169; 2003 Stu Nicholls&nbsp;</div></object>
</span>
</a>

<a href="#">
<br>p<br>&#8226;<br>2
<span class="left"><object><p class="pad"><br><img src="%E4%B9%A6%E6%9C%AC_files/slave.gif" alt="My current avatar" title="My current avatar">This
 is my current avatar, it has lasted longer than most as I have 
temporarily run out of time to design a new one. But there is a new one 
coming......<br><br>&nbsp;...but I like it</p></object></span>
<span class="right"><br><br>
<span class="bold">This is page two.</span><object><p class="pad">Following on from page one, we arrive at page 2. <br><br>Equally uninteresting as far as content goes, but never the less I suppose I must write something.</p></object>
<object><div class="copy">&#169; 2003 Stu Nicholls&nbsp;</div></object>
</span>
</a>

<a href="#">
<br>p<br>&#8226;<br>3
<span class="left"><object><p class="pad"><br><img src="%E4%B9%A6%E6%9C%AC_files/dans.gif" alt="Created for Daniel" title="Created for Daniel">Ok.
 This one was created from a brief from Daniel for a 'good looking super
 hero with flowing cloak stood with chest out on top of a small hill'. I
 think it captures this quite well.<br><br>
but then, I may be wrong ;o)</p></object></span>
<span class="right"><br><br>
<span class="bold">This is page three.</span><object><p class="pad">A blatant plug for the portal.<br><br>Portland
 Portal is THE place to go for all your portland problems and 
information. Run by a group of dedicated enthusiasts who have enough 
knowledge between them to help you with ANY questions you may have.<br><br>Also the place to go for a chat (we don't mind going 'off topic' do we Graham?).<br><br>So come along, join in, have fun.<br>http://portal.portland.co.uk</p></object>
<object><div class="copy">&#169; 2003 Stu Nicholls&nbsp;</div></object>
</span>
</a>

<a href="#">
<br>p<br>&#8226;<br>4
<span class="left"><object><p class="pad"><br><img src="%E4%B9%A6%E6%9C%AC_files/freddie2.png" alt="Queen" title="Queen"><br>and finally an avatar dedicated to what was the best group in the world. Fronted by the one and only, never to be forgotten,<br><br>Freddie Mercury.</p></object></span>
<span class="right"><br><br>
<span class="bold">And finally, this is page four.</span><br><br><object><p class="pad">Which
 brings me to the end of this book. It could have had more pages, but as
 a demo it would serve no purpose. All that you would need is smaller 
tabs for page selection and everything else would fall into place.<br><br>Any comments on this idea please direct to the portal (that's the only drawback with this idea ~ you cannot nest links :o( ).</p></object>
<object><div class="copy">&#169; 2003 Stu Nicholls&nbsp;</div></object>
</span>
</a>

<object>
<div id="front">
<br><br>
<img src="%E4%B9%A6%E6%9C%AC_files/stu.gif" alt="Another avatar" title="Another avatar"><br>
Welcome to my world.<br>
<br>
FURTHER INSTRUCTIONS<br>
<br>
- To see the contents ~ hover your mouse over the tabs.<br><br>
- To come back to this page ~ move the mouse outside of the book, or towards the center.<br><br>
- To close the book ~ click the mouse anywhere on the screen (IE) OR release the mouse (Mozilla/Netscape).<br>
<br><br>
This diary is for demonstration only so don't expect too much content ;o)
</div>
</object>

</span>

</span>

<div id="start">
<a id="tp" href="#"><span class="h1">This is my CSS DIARY</span><span class="bold">INSTRUCTIONS</span><br><br><br>Click the mouse anywhere on the diary to open it.<br><br>Click anywhere again to close.<br><br>Further instructions inside.<br><br>
<span class="h1">ALL DONE WITH CSS</span><br><br>
Works in IE, Mozilla/Netscape NOT Opera.<br>
Although Opera will sort of work with just the 'open diary'.
<br><br>
Please allow time for the images to load.<br>
Mozilla/Netscape users may need to refresh<br>
the page as it doesn't always get it right<br>
first time ;o)
</a>
</div>
If you like this demonstration then Please visit my new Cutting Edge CSS web site at <a href="http://www.cssplay.co.uk/" title="CSS PLaY">www.cssplay.co.uk</a><br>
If you are using Mozilla/NN7/Firefox you may need to refresh the screen to see the demonstration correctly.      <a href="http://validator.w3.org/check/referer">Valid XHTML1.0 Strict</a>
</div>




</body></html>